<template>
  <div class="app-container">
    <ECard rightTitle="授权" :ilabel="ilabel" leftTitle="角色组">
      <template #left>
        <el-button type="primary" @click="modifyFn(1)" size="medium"
          >新增角色组</el-button
        >
        <div class="title">角色组列表</div>
        <div class="caidan">
          <div>
            <el-tree
              :data="groupTableData"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="gropuRowClick"
              :props="defaultPropsone"
              default-expand-all
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i class="el-icon-document-copy" style="margin-right: 10px"></i>
                <span>{{ node.label }}</span>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link"> ... </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="modifyFn(data)"
                      >修改角色组</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="deleteFn(node, data)"
                      >删除角色组</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <div>
          <el-button
            type="primary"
            @click="modifyFn(2)"
            size="medium"
            v-if="IS_SYSTEM != 1"
            :disabled="!groupClickId"
            >新增角色</el-button
          >
          <ETable
            style="margin-top: 20px"
            ref="ETable"
            :height="320"
            :titleObj="titleObj"
            @sortFun="sortFun"
            operateWidth="200"
            :reqObj="setOf"
            :reqFn="getSysRole"
          >
            <template v-slot="{ scope }">
              <el-button
                @click="modifyFn(scope)"
                type="text"
                size="small"
                v-if="IS_SYSTEM != 1"
                >修改</el-button
              >
              <el-divider
                direction="vertical"
                v-if="IS_SYSTEM != 1"
              ></el-divider>
              <el-button
                @click="deleteClick(scope)"
                type="text"
                size="small"
                v-if="IS_SYSTEM != 1"
                >删除</el-button
              >
              <el-divider
                direction="vertical"
                v-if="IS_SYSTEM != 1"
              ></el-divider>
              <el-button @click="viewClick(scope)" type="text" size="small"
                >查看用户</el-button
              >
              <el-divider
                direction="vertical"
                v-if="
                  IS_SYSTEM == 0 ||
                  (IS_SYSTEM == 1 &&
                    $store.state.user.userInfo.org &&
                    $store.state.user.userInfo.org.id == '8888888888888888')
                "
              ></el-divider>
              <el-button
                @click="empowerClick(scope)"
                type="text"
                size="small"
                v-if="
                  IS_SYSTEM == 0 ||
                  (IS_SYSTEM == 1 &&
                    $store.state.user.userInfo.org &&
                    $store.state.user.userInfo.org.id == '8888888888888888')
                "
                >授权</el-button
              >
            </template>
          </ETable>
        </div>
      </template>
    </ECard>
    <roleEdit ref="roleEdit"></roleEdit>
    <userEdit ref="userEdit"></userEdit>
    <empowerEdit ref="empowerEdit"></empowerEdit>
  </div>
</template>

<script>
let id = 1000;
import ECard from "@/components/ECard";
import ETable from "@/components/ETable";
import roleEdit from "./roleEdit.vue";
import userEdit from "./userEdit.vue";
import empowerEdit from "./empowerEdit.vue";
import {
  getSysRoleGroup,
  deleteSysRoleGroup,
  getSysRole,
  deleteSysRole,
} from "@/api/management/role";
export default {
  name: "role",
  components: {
    ECard,
    ETable,
    roleEdit,
    userEdit,
    empowerEdit,
  },
  data() {
    return {
      input: "",
      groupTableData: [],
      setOf: {
        groupId: "",
        sortStr: "",
      },
      groupTitleObj: [{ prop: "GROUP_NAME", label: "角色组" }],
      groupClickId: "",
      titleObj: [{ prop: "ROLE_NAME", label: "角色名称", sortable: "custom" }],
      roleClickId: "",
      defaultPropsone: {
        children: "ab",
        label: "GROUP_NAME",
      },
      ilabel: "",
      roleName: "",
      // 如果为1代表隐藏新增 修改 删除按钮
      IS_SYSTEM: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getSysRole,
    async getData() {
      let res = await getSysRoleGroup({
        currPage: 1,
        pageSize: 20,
        isSystem: 0,
        "sortList[0][sortName]": "IS_SYSTEM",
        "sortList[0][sortType]": "desc",
        "sortList[1][sortName]": "GROUP_NAME",
        "sortList[1][sortType]": "asc",
      });
      if (res.code == 0 && res.data.bcode == 0) {
        this.groupTableData = res.data.bdata.gdata;
      }
    },
    modifyFn(val) {
      this.$refs.roleEdit.open(val, this.groupClickId);
    },
    async deleteFn(node, data) {
      if (data.GROUP_NAME == "默认组" && data.ID == 1) {
        return this.$message.error("默认角色组不能删除");
      }
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysRoleGroup(data.ID);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("删除成功");
          this.getData();
        }
      }
    },
    // 角色删除
    async deleteClick(row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysRole(row.ID);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(`${res.data.bmsg}`);
          // 页数大于一页并且当前页只有一条数据，删除后页数-1
          if (
            this.$refs.ETable.pageInfo.total %
              this.$refs.ETable.pageInfo.size ===
              1 &&
            this.$refs.ETable.pageInfo.page > 1
          ) {
            this.$refs.ETable.pageInfo.page -= 1;
          }
          this.$refs.ETable.getData();
        }
      }
    },
    async viewClick(row) {
      this.$refs.userEdit.open(row);
    },
    async empowerClick(row) {
      this.$refs.empowerEdit.open(row);
    },
    // 左侧表格 行点击事件
    async gropuRowClick(scope) {
      this.ilabel = scope.GROUP_NAME;
      this.groupClickId = scope.ID;
      this.setOf.groupId = scope.ID;
      this.IS_SYSTEM = scope.IS_SYSTEM;
      this.pageFun();
    },
    async pageFun() {
      this.$refs.ETable.pageInfo.page = 1;
      this.$refs.ETable.getData();
    },
    async sortFun(str) {
      this.setOf.sortStr = str;
      this.$refs.ETable.getData();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-card__body {
    position: relative !important;
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
